<template>
    <view class="main">
        <view class="tip">当前手机号：{{old.slice(0,3)}}****{{old.slice(-4)}}</view>
        <view class="form">
            <input type="number" placeholder="请输入新手机号" v-model="mobile">
        </view>
        <view class="form">
            <input type="number" placeholder="请输入短信验证码" v-model="code">
            <view class="send" @tap="send">{{is_send ? time+'秒后获取' : '获取验证码'}}</view>
        </view>
        <view style="margin-top: 100rpx;">
            <u-button type="primary" @click="submit()">保存</u-button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                old: '',
                mobile: '',
                code: '',

                is_send: false,
                time: 60
            }
        },
        onLoad() {
            var user = uni.getStorageSync('user');
            if(user) {
                this.old = user.mobile;
            }
        },
        methods: {
            send() {
                if (this.is_send) return false;
                if(!this.mobile) {
                    return this._toast('请输入新手机号');
                }
                if(this.mobile == this.old) {
                    return this._toast('不能使用旧手机号');
                }
                this._ajax({
                    url: '/api/sms/send',
                    data: {
                        mobile: this.mobile,
                        event: 'changemobile'
                    },
                    success: res => {
                        if (res.code == 1) {
                            this.is_send = true;
                            var timer = setInterval(() => {
                                this.time--;
                                if (this.time == 0) {
                                    this.time = 60;
                                    this.is_send = false;
                                    clearInterval(timer);
                                }
                            }, 1000);
                        } else {
                            this._toast(res.msg);
                        }
                    }
                }, 1);
            },
            submit() {
                if(!this.mobile) {
                    return this._toast('请输入新手机号');
                }
                if(this.mobile == this.old) {
                    return this._toast('不能使用旧手机号');
                }
                if (!this.code) {
                    return this._toast('请输入验证码');
                }
                this._ajax({
                    url: '/api/user/changeMobile',
                    data: {
                        mobile: this.mobile,
                        code: this.code
                    },
                    success: res => {
                        if (res.code == 1) {
                            uni.setStorageSync('user', res.data);
                            this._toBack(2);
                        } else {
                            this._toast(res.msg)
                        }
                    }
                }, 1);
            }
        },

        props: {

        }
    }
</script>

<style scoped lang='less'>
    .main {
        padding: 60rpx 30rpx;
        
        .tip {
            font-size: 28rpx;
            color: #555;
            margin-bottom: 30rpx;
        }
        .form {
            height: 100rpx;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #dcdcdc;
            
            input {
                padding: 0 10rpx;
                font-size: 32rpx;
                flex: 1;
            }
            
            .send {
                color: #3465b1;
                font-size: 32rpx;
                padding: 10rpx;
            }
        }
    }
</style>
